<template>
  <el-card class="box-card3" ref="boxcard3">
    <template #header>
      <div class="card-header">
        <IAntDesignPieChartOutlined></IAntDesignPieChartOutlined>
        <span>{{ $t("home.code") }}</span>
        <el-tag>{{ "Gitee" }}</el-tag>
      </div>
    </template>
    <div class="content" ref="card3"></div>
  </el-card>
</template>
<script lang="ts">
export default {
  // name: "card3",
};
</script>
<script lang="ts" setup>
import { useDheader } from "../../store/Dheader";
const Dheader = useDheader();
const { proxy } = getCurrentInstance() as any;
const echarts = proxy.$echarts;
let option = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    left: "center",
  },
  series: [
    {
      name: "组成",
      type: "pie",
      radius: ["40%", "70%"],
      tooltip: {
        valueFormatter: (value: string) => {
          return value + "%";
        },
      },
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 55.5, name: "Vue" },
        { value: 32.9, name: "Ts" },
        { value: 11.1, name: "Css" },
        { value: 0.4, name: "Html" },
        { value: 0.1, name: "Scss" },
      ],
    },
  ],
};
const card3 = ref();
const boxcard3 = ref();
onMounted(() => {
  let myChart = echarts.init(card3.value);
  option && myChart.setOption(option);

  if (window.innerWidth < 1200 && window.innerWidth > 700)
    boxcard3.value.$el.style.width = Dheader.header.width / 2 - 32 + "px";
  else boxcard3.value.$el.style.width = "100%";
  setTimeout(() => {
    myChart.resize();
  }, 400);
  watch(
    () => Dheader.header.width,
    (newValue, oldValue) => {
      if (window.innerWidth < 1200 && window.innerWidth > 700)
        boxcard3.value.$el.style.width = newValue / 2 - 32 + "px";
      else boxcard3.value.$el.style.width = "100%";
      setTimeout(() => {
        myChart.resize();
      }, 400);
    }
  );
});
</script>

<style lang="scss" scoped>
.box-card3 {
  width: 100%;
  min-width: 300px;
  height: fit-content;
  min-height: 300px;

  .card-header {
    .el-tag {
      margin-left: auto;
    }
  }

  .content {
    width: 100%;
    min-width: 300px;
    height: 100%;
    min-height: 240px;
  }
}
</style>
